<template>
    <div>
      <avue-timeline pending time :time-width="100" class="timeline" v-if="flowUpTotal > 0">
        <avue-timeline-item icon="el-icon-tickets" v-for="(item,index) in operationList" :key="index" :icon="item.icon">
          <div slot="time">{{item.operTime}}</div>
          <div slot="content" v-if="item.operType == 3" style="width: 100%">
            <p style="font-weight: 600; color: black">{{item.emailType}}</p>
            <p>{{item.operTo}}</p>
            <p class="mail_content">邮件主题：{{item.operTopic}}</p>
          </div>
          <div slot="content" v-else>
            <p>{{item.operContent}}</p>
          </div>
        </avue-timeline-item>
      </avue-timeline>
      <div v-if="flowUpTotal == 0" class="no-data">
        <span>暂无数据</span>
      </div>
      <el-pagination
        layout="prev, pager, next"
        style="text-align: center"
        @current-change="floeUpChangePage"
        :current-page="nowPage"
        :total="flowUpTotal">
      </el-pagination>

    </div>
</template>

<script>
  import {getOperation} from '@/api/customer'
    export default {
        name: "operation",
        props:['id'],
        data(){
            return {
                nowPage:1,
                flowUpTotal:0,
                operationList:[]
            }
        },
        methods:{
            init() {
                getOperation(this.id, this.nowPage, 10).then(res => {
                    this.operationList = res.data.data.records
                    this.flowUpTotal = res.data.data.total
                })
            },
            floeUpChangePage(page) {
                this.nowPage = page
                getOperation(this.id, this.nowPage, 10).then(res => {
                    this.operationList = res.data.data.records
                    this.flowUpTotal = res.data.data.total
                })
            }
        }
    }
</script>

<style scoped>
  .no-data{
    text-align: center;
    font-weight: 600;
    margin: 10px;
  }
</style>
